<template>
  <div ref="slider" class="my-slider" @click="selectFn">
    <div class="in-progress" :style="{width: value+'%'}" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0,
      validator(value) {
        return value >= 0 && value <= 100
      }
    }
  },
  methods: {
    selectFn(event) {
      const dom = this.$refs.slider
      const width = dom.offsetWidth // 获取容器宽度
      const clickWidth = event.clientX - dom.offsetLeft // 获取点击位置宽度
      let value = Math.ceil((clickWidth / width) * 100) // 转换当前点击位置值
      value = value < 0 ? 0 : value
      value = value > 100 ? 100 : value
      this.$emit('input', value) // 实现v-model
    }
  }
}
</script>
<style scoped>
.my-slider{
    width: 100%;
    height: 40px;
    border-radius: 10px;
    background-color: #e4e7ec;
}
.in-progress{
    width: 50%;
    height: 40px;
    border-radius: 10px;
    /* border-top-right-radius: 0;
    border-bottom-right-radius: 0; */
    background-color: #3f9eff;
    position: relative;
}
.in-progress::after{
    position: absolute;
    right: -30px;
    top: -10px;
    content: "";
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 10px solid #3f9eff;
    background-color: #fff;
}
</style>
